
<div id="box">

</div>
<script>


// let obj={
//     // 属性名:属性值 （属性名：字符串    属性值：字符串 函数  数组   数字  对象 。。。。）
// }

let u="user"
let n="name"

let num="phoneNum"

let value="李重达"

let  obj={
    // "name":"李重达"  // 在js中，对象的属性名的"" 可以省略不写

    // name:"李重达"  // 在js中，对象的属性名的"" 可以省略不写

    // [表达式]:值   // 表达式：变量   判断  计算  字符串拼接。。。最终可以代表一个值。对象中可以使用表达式作为属性名，但是表达式最终代表的结果，还是一个字符串
    

    // username:"李重达",
    // ["username"]:"李重达",
    // ["user"+"name"]:"李重达",
    // [u+n]:"李重达",


    [typeof value == "number"?num:u+n ]:value
    
}

// console.log(obj);
console.log(obj.phoneNum);
console.log(obj["phoneNum"]);
console.log(obj["phone"+"Num"]);
console.log(obj[typeof value == "number"?num:u+n ]);


// obj.age=20

let a="age"
obj[a]=20

console.log(obj);


// ---------------------------
box.style.width="100px"
box.style.height="100px"
// box.style.background="red"
// box.style.backgroundColor="pink"

box.style["background-color"]="yellow"




</script>